<template>
	<view>
		<Tabs :tabs="tabs" @tabsItemChange="tabsItemChange"></Tabs>
		<view class="collect_main">
			<view class="collect_content">
				<navigator :url="`/pages/goodDetail/goodDetail?goods_id=${item.id}`" class="goods_item"
					v-for="item in collect" :key="item.id">
					<view class="goods_img_wrap">
						<image mode="widthFix"
							:src="item.smallLogo?item.smallLogo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'">
						</image>
					</view>
					<view class="goods_info_wrap">
						<view class="goods_name">{{item.name}}</view>
						<view class="goods_price">￥{{item.price}}</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collect: [],
				tabs: [{
						id: 0,
						value: "商品收藏",
						isActive: true
					},
					{
						id: 1,
						value: "品牌收藏",
						isActive: false
					},
					{
						id: 2,
						value: "店铺收藏",
						isActive: false
					},
					{
						id: 3,
						value: "浏览器足迹",
						isActive: false
					}
				]
			}
		},
		onShow() {
			this.collect = uni.getStorageSync("collect") || [];
			console.log(this.collect)
		}
	}
</script>

<style lang="scss" scoped>
	.collect_main {
		background-color: #f3f4f6;

		.collect_content {
			.goods_item {
				display: flex;
				border-bottom: 1px solid #ccc;
				background-color: #fff;

				.goods_img_wrap {
					flex: 2;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 70%;
					}
				}

				.goods_info_wrap {
					flex: 3;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.goods_name {
						display: -webkit-box;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.goods_price {
						color: $theme-color;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>
